<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { Page } from "@vben/common-ui";
import { TabPane, Tabs ,Card,List,ListItem} from "ant-design-vue";


const settingList = ref([
  { component: defineAsyncComponent(() => import('./site-setting.vue')), key: "1", name: "站点设置" },
  { component: defineAsyncComponent(() => import('./upload-setting.vue')), key: "2", name: "上传设置" },
  { component: defineAsyncComponent(() => import('./email-setting.vue')), key: "3", name: "邮件设置" },
  { component: defineAsyncComponent(() => import('./sms-setting.vue')), key: "4", name: "短信设置" },
]);



</script>

<template>
  <Page>
    <Card>
    <Tabs class="h-full">
      <TabPane v-for="item in settingList" :key="item.key" :tab="item.name">
        <component :is="item.component" v-bind="$attrs" />
      </TabPane>
    </Tabs>
    </Card>
  </Page>
</template>

<style scoped>
.custom-tabs{
  min-height: 500px;
}

.custom-tabs >>> .ant-tabs-nav {
  width: 220px; /* 设置左侧选项卡的宽度 */
}
</style>
